<style src="@/css/components/table.css"></style>
<style src="@/css/components/button.css"></style>
<style src="@/css/components/el-dialog.css"></style>

<style scoped >
.role-list {
    background:#fff;
    padding:30px;
    flex:1;
    display: flex;
    flex-direction: column;
}
.form-box-role-list .el-form-item__content{width: 340px;}
.role-list .mb20 { margin-bottom:20px; }

.role-list .showdow.btn {
    display:flex;
    align-self: flex-end;
}

.pages {
    margin-top: 30px;
}

.role-list-new {
    display:flex;
    min-height: 600px;
}

.role-list-new .role-cont-tip {
    display: flex;
    justify-content: space-between;
}
.role-list-new .role-list-child{
    width:302px;
    display:flex;
    flex: 302px 1 auto;
    background:#fff;
    box-sizing:border-box;
    margin-right:4px;
    flex-direction: column;
}

.role-list-new .role-list-child .role-list-create {
    width:100%;
    height: 54px;
    border-bottom:1px solid #E7ECEF;
    font-size:14px;
    color:#7485B1;
    text-align: center;
    line-height: 54px;
    cursor: pointer;
}

.role-list-new .role-list-child .role-list-create > i {
    margin-right:10px;
    font-size:10px;
}

.role-list-new .role-list-child > ul {
    padding-top: 10px;
}

.role-list-new .role-list-child > ul li .role-list-cont {
    width:100%;
    height:50px;
    padding:15px 40px;
    font-size:14px;
    color:#7485B1;
    display: flex;
    box-sizing: border-box;
    align-items: center;
    justify-content:space-between;
    position: relative;
    cursor: default;
}

.role-list-new .role-list-child > ul li.active .role-list-cont, .role-list-new .role-list-child > ul li .role-list-cont .operation-sup span:hover {
    color:#3577FB;
}

.role-list-new .role-list-child > ul li .role-list-cont .operation-sup {
    position: absolute;
    width:138px;
    height:111px;
    background:rgba(255,255,255,1);
    box-shadow:0px 0px 12px 0px rgba(0,0,0,0.06);
    top:44px;
    right:0;
    z-index: 9;
    text-align: center;
    color:#000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    display: none;
}

.role-list-new .role-list-child > ul li .role-list-cont .hover:hover .operation-sup {
    display: flex;
}

.role-list-new .role-list-child > ul li .role-list-cont .operation-sup:after {
    content:'';
    width:0;
    height:0;
    border-left:8px solid transparent;
    border-right:8px solid transparent;
    border-bottom:8px solid #fff;
    position: absolute;
    top:-8px;
    left:60%;
    margin-left:-2px;
}

.role-list-new .role-list-child > ul li .role-list-cont .operation-sup span {
    height: 20px;
    line-height: 20px;
    padding:10px 0;
    font-size:14px;
    color:#3A3A63;
    cursor: pointer;
    width:100%;
    display: inline-block;

}

.role-list-new .role-list-child > ul li .role-list-cont  i {
    transform: rotate(90deg);
    cursor: pointer;
    font-size:16px;
}
.main-title{
    width:100%;
    height:40px;
    background:rgba(229,247,255,1);
    border-radius:4px;
    border:1px solid rgba(142,212,255,1);
    font-size:14px;
    color:rgba(102,106,128,1);
    margin-bottom:20px;

    display: flex;
    box-sizing: border-box;
    align-items: center;
}
.main-title img {
    width: 14px;
    height: 14px;
    margin: 0 6px 0 10px;
}

.role-list-table.el-table th:first-child>.cell, .role-list-table .el-table-column--selection .cell {
    padding-left:49px;
}

.main-title span{ color: #bbb; font-size: 14px;}
</style>
<template>
<div class="role-list-new">
    <div class="role-list-child">
        <div class="role-list-create" @click="addRole">
            <i class="el-icon-plus"></i>创建角色
        </div>
        <ul>
            <li v-for="(item, index) of roleList" :key="index" :class="{'active' : curItem == index}" @click="switchFn(item, index)">
                <div class="role-list-cont">
                    <span>{{item.RoleName}} ({{item.count}})</span>
                    <div class="hover">
                        <i class="el-icon-more" v-if="item.RoleSign != 'sa'"></i>
                        <div class="operation-sup" v-if="item.RoleSign != 'sa'">
                            <span @click="deleteRoleState = true">删除</span>
                            <router-link tag="span" :to="{path:'/organization/create-role', query:{ roleID : item.RoleID }}">编辑</router-link>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <section class="plan-list role-list">
        <div class="role-cont-tip">
            <el-button type="primary" class="showdow mb20 btn" @click="state = true">添加人员</el-button>
            <el-button type="primary" class="showdow mb20 btn" @click="deleteBtn">批量删除</el-button>
        </div>

        <div data-v-7d22cb0a="" class="main-title">
            <img data-v-7d22cb0a="" data-v-d8050750="" src="http://jhsy-img.caizhu.com/FgEYebYNYNIIDbE1wB1J5Hwp6cH3" alt="">该角色为默认角色，不可操作，管理员至少保留一人
        </div>

        <el-table :data="list" style="width: 100%" class="newTab role-list-table" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="160"></el-table-column>
            <el-table-column prop="Username" label="姓名" min-width="20%"></el-table-column>
            <el-table-column prop="DepartmentName" label="部门" min-width="20%"></el-table-column>
            <el-table-column prop="RoleDesc" label="职务" min-width="20%">
                <template slot-scope="scope">
                    -
                </template>
            </el-table-column>
            <el-table-column prop="RoleDesc" label="手机" min-width="20%">
                <template slot-scope="scope">
                    -
                </template>
            </el-table-column>
        </el-table>


        <pageModel class="pages newPage" :total="total" :page="page" @changePageSize="getPageSize" @changePage="getPage"></pageModel>

        <!-- 弹窗区 -->
        <el-dialog
            title="提示"
            :visible.sync="deleteState"
            class="new-dialog"
            width="480px">
            <div class="cont">确定删除该成员</div>
            <span slot="footer" class="dialog-footer">
                <el-button type="text no-border" @click="deleteState = false">取消</el-button>
                <el-button type="primary" class="add" @click="deleteFn">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog
            title="提示"
            :visible.sync="deleteRoleState"
            class="new-dialog"
            width="480px">
            <div class="cont">确定删除该角色</div>
            <span slot="footer" class="dialog-footer">
                <el-button type="text no-border" @click="deleteRoleState = false">取消</el-button>
                <el-button type="primary" class="add" @click="delFn">确 定</el-button>
            </span>
        </el-dialog>


        <selectUser
            :personnelState="state"
            :clearState="true"
            @setUser="getUser"
            :recordSelectId="selectUserList"
        >
        </selectUser>
    </section>
</div>
</template>

<script>

import qs from 'qs'
import pageModel from "components/pageModel.vue"
import selectUser from "components/selectUser.vue"


export default{
    data: function(){
        return {
            list:[],
            roleList:[],
            selectIdAll:[],
            selectUserList:[],
            curItem:0,
            path:[
                {
                    'name':'设置',
                    'path':'/organization/dept-list'
                },
                {
                    'name':'角色权限'
                }
            ],
            deleteState:false,
            deleteRoleState:false,
            state:false,
            pageSize: 10,
            total:0,
            page:1,

            form:{
                RoleName:'',
                RoleDesc:'',
            },
            roleID:'',
            editFlag:false,
            addFlag:false,
            rules: {
                RoleName: [
                    { required: true, message: '请输入角色名称', trigger: 'blur'}
                ],
                RoleDesc: [
                    { required: true, message: '请输入角色说明', trigger: 'blur'}
                ]
            },
        }
    },
    mixins: [mixinMethods],
    components:{
        pageModel,
        selectUser
    },
    methods: {
        // 切换角色
        switchFn(item, index) {
            this.page = 1
            this.curItem = index
            this.roleID = item.RoleID
            this.employeeList()
        },
        // 编辑角色
        editRole(roleID){
            this.$router.push({path:'/organization/create-role', query:{roleID: roleID}})
        },
        // 新增角色
        addRole(){
            this.$router.push({path:'/organization/create-role'})
        },

        // 全选
        handleSelectionChange(val) {
            if(!!val && val.length > 0) {
                this.selectIdAll = val.map((v)=>{
                    return v.ERID
                })
            } else {
                this.selectIdAll  = []
            }
        },

        deleteBtn() {
            if( this.selectIdAll.length > 0) {
                this.deleteState = true
            } else {
                this.$message.error('请至少选择一个人员！')
            }

        },
        // 获取选中的员工
        getUser(arrId, value) {
            this.state = value

            if(!Array.isArray(arrId)) {
                this.$message.error('糟糕,出错了')
                return;
            }

            if(arrId.length <= 0) return;
            this.addEmployeeRole(arrId)
        },


        // 批量删除人
        deleteFn() {
            axios.post('/com/role/delEmployeeRole', qs.stringify({
                roleID:this.roleID,
                ERID: this.selectIdAll.join(',')
            })).then((res) => {
                var d = res.data;
                if(d.flag == 1){
                    this.page = 1
                    this.roleListFn()
                    this.deleteState = false
                }else {
                    this.$message.error(d.msg)
                }
            })
        },

        // 添加人员到角色
        async addEmployeeRole(employeeID) {
            let {data} = await axios.post('/com/role/addEmployeeRole', `roleID=${this.roleID}&employeeID=${employeeID.join(',')}`)
            if(data.flag === 1) {
                this.page = 1
                this.roleListFn()
            } else {
                this.$message.error(data.msg)
            }
        },

        // 获取角色下的人
        async employeeList() {
            let {data} = await axios.post('/com/role/employeeList', `roleID=${this.roleID}&page=${this.page}&pagesize=${this.pageSize}`)

            if(data.flag === 1) {
                this.list = data.data.Row
                this.total = data.data.Total

                // this.selectUserList =
            } else {
                this.$message.error(data.msg)
            }
        },

        // 删除角色
        async delFn(){
            let {data} = await axios.post('/com/role/del', `roleID=${this.roleID}`)
            if(data.flag === 1) {
                this.roleListFn()
                this.deleteRoleState = false
            } else {
                this.$message.error(data.msg)
            }

        },
        // 获取角色列表
        async roleListFn() {
            let {data} = await axios.post('/com/role/roleList')
            if(data.flag === 1) {
                this.roleList = data.data.Row
                this.roleID = this.roleID || this.roleList[0].RoleID
                this.curItem = this.roleList.findIndex(v=> v.RoleID == this.roleID)
                this.employeeList()
            } else {
                this.$message.error(data.msg)
            }
        },

        // 当前显示条数发生改变
        getPageSize(value) {
            this.pageSize = value
            this.employeeList()
        },

        // 当前分页改变
        getPage(value) {
            this.page = value
            this.employeeList()
        },
    },
    mounted: function(){
        this.$store.commit('setPath', this.path)
        this.roleListFn()
    }
}


</script>
